<style>
    .gallery-item {
        position: relative;
        display: inline-block;
    }
    .gallery-item .close-btn {
        position: absolute;
    right: 0;
    top: 0;
    width: 0.8rem;
    height: 0.8rem;
    display: block;
    }
</style>
<div class="find-app" id="app">
    <!-- public-head -->
    <div class="header-mobile">
        <a class="nav-back" href="javascript:history.go(-1)">
            <img class="icon" src="__CDN__/assets/img/return@2x.png" alt="">
        </a>
        <h1 class="nav-title">招领支付</h1>
    </div>
    <!-- main -->
    <div class="main-wrapper">

        <div class="find-out-wrapper">
            <div class="section-floor">
                <div class="publish-list">
                    <div class="list-item">
                        <div class="head">
                            <div class="user-info">
                                <img class="avatar"  src="{$something.user.avatar}"  alt="">
                                <div>
                                    <p class="name">{$something.user.nickname}</p>
                                    <p class="time">{$something.createtime}</p>
                                </div>
                            </div>
                        </div>
                        <div class="body">
                            <div class="info-bar">
                                <span class="label">失物招领</span>
                                {$something.content}
                            </div>
                            <div class="gallery-bar">
                                <div  class="gallery-item" v-for="(item,index) in pageDataInit.images" :key="index">
                                    <!--{{pageDataInit.images}}-->
                                    <img  class="img" v-lazy="item" alt="">
                                </div>
                            </div>
                            <div class="location-bar">
                                <div>
                                    <img class="icon" src="__CDN__/assets/img/icon-map@2x.png" alt="">
                                    <span>{{pageDataInit.detailedaddress}}</span>
                                </div>
                                <div>
                                    <span>浏览 {{pageDataInit.browse}}</span>
                                </div>
                            </div>
                            <div class="reward-bar">
                                <div class="inner">
                                    <span class="reward">赏金</span>
                                    <span class="symbol">￥</span>
                                    <span class="price">{$something.money}</span>
                                    <span class="could">分享预计可获得￥{$money}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section-line-space"></div>
            <div class="section-floor">
                <div class="payment-bar">
                    <span class="">支付金额:</span>
                    <span class="">
                            <span class="symbol">￥</span>
                            <span class="price">{$something.money}</span>
                        </span>
                </div>
            </div>
            <div class="section-floor">
                <textarea maxlength="100" class="textarea" placeholder="请输入填写内容" v-model="field.eurekaContent" name="" id="" cols="30" rows="10"></textarea>
            </div>
            <div class="section-floor">
                <div class="upload-wrapper">
                    <p class="title">失物或失踪人照片上传</p>
                    <div class="gallery-bar">
                        <div class="gallery-item" v-for="(item,index) in field.picturs">
                            <img class="img" :src="item" alt="">
                            <img @click="removeImages(index)" class="close-btn" src="__CDN__/assets/img/close.png"
                                        alt="">
                        </div>
                        <label v-if="field.picturs.length<3" class="upload-control" for="upload">
                            <img class="img" src="__CDN__/assets/img/add@2x.png" alt="">
                            <input ref='anchorUpload' accept="image/*" id="upload" type="file" @change="uploadPicture">
                        </label>
                    </div>

                </div>
            </div>
            <div class="section-floor">
                <div class="submit-wrapper">
                    <a class="submit-btn" @click="commit()" >提交</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script src="__CDN__/assets/js/exif.js"></script>
<script src="__CDN__/assets/js/base64image.js"></script>
<script>
    wx.config(<?php echo $js->config(array('chooseWXPay'), false) ?>);
    let index = new Vue({
        el: '#app',
        data: {
            field: {
                eurekaContent: "请输入填写内容",
                id:'{$id}',
                picturs: [],
            },
            // 页面初始化获取数据
            pageDataInit:{}
        },
        created() {

        },
        mounted() {
           this.getPageData()
        },
        methods: {
            removeImages(index){
                this.field.picturs.splice(index,1)
            },
            getPageData(){
                axios({
                    method: "post",
                    url: "{:url('user/claim')}",
                    data: {
                        RequestName:'ajax',
                        id:this.field.id
                    },
                    headers: {'X-Requested-With': 'XMLHttpRequest'}
                }).then(res=>{
                    console.log(res.data.data)
                    if (res.data.code == 1) {
                        this.pageDataInit = res.data.data
                        this.pageDataInit.images = res.data.data.images.split(',')
                        if(res.data.data.eurekaimages){
                            this.field.picturs=res.data.data.eurekaimages.split(',')
                        }
                        this.field.eurekaContent=res.data.data.eurekaContent


                    }
                })
            },
            commit() {

                let self = this;
                axios({
                    method: "post",
                    url: "{:url('user/claim')}",
                    data: self.field,
                    headers: {'X-Requested-With': 'XMLHttpRequest'}
                }).then(res => {

                    if (res.data.code == 1) {
                        self.$messagebox({title: res.data.msg}).then(rest => {
                            if (rest == 'confirm') {
                                var data = res.data.data;
                                wx.chooseWXPay({
                                    timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                    nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
                                    package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                                    signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                    paySign: data.paySign, // 支付签名
                                    success: function (res) {
                                        // 支付成功后的回调函数
                                        if (res.errMsg == "chooseWXPay:ok") {

                                                    self.$messagebox({title: "支付成功"}).then(rest => {
                                                        window.location.href = "{:url('user/participate')}"
                                                    });



                                        }else{
                                            self.$messagebox({title: "支付失败，请返回重试。"});
                                        }
                                    },
                                    fail: function (res) {
                                        self.$messagebox({title: "支付失败，请返回重试。"});
                                    }
                                });
                                // history.go(-1);
                            }
                        })
                    } else {
                        alert(res.data.msg);
                    }
                })
            },
            uploadPicture(event) {
                let self = this
                base64Image({
                    width: 750,                             /*【选填】宽度默认750，如果图片尺寸大于该宽度，图片将被设置为该宽度*/
                    ratio: 0.75,                            /*【选填】压缩率默认0.75 */
                    file: self.$refs.anchorUpload,                               /*【必填】对应的上传元素 */
                    callback: function (imageUrl) {         /*【必填】处理成功后的回调函数 */
                        /*imageUrl为得到的图片base64数据，这里可以进行上传到服务器或者其他逻辑操作 */
                        self.axiosPictrue(imageUrl)
                    },
                });
            },
            axiosPictrue(base64String){
                let self = this
                let formdata = new FormData()
                formdata.append('file', base64String)
                axios({
                    method: "post",
                    url: "/api/common/uploadBase64",
                    data: formdata,
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                }).then(res => {
                    console.log(res)
                    if (res.data.code == 1) {
                        self.field.picturs.push(res.data.data.url)
                        console.log(self.field.picturs)
                    } else {
                        alert("上传失败");
                    }
                })
            },
            loadMore() {

            }
        }
    })
</script>




